<template>
  <article class="page" style="overflow-y: hidden">
    <headerbar :hideBack="true" >
      <div @click="back()" class="back"><span class="arrow"></span></div>
      {{ nickName }}的播客空间</headerbar>
    <div class="block">
      <div class="person-head" @click="goModifyNick()">
        <div class="avatar">
          <div v-if="!userInfo.photo" class="avatar-img">
            <img
              src="../../../../static/images/dangjian/home/water-logo.png"
              alt=""
            />
          </div>
          <!--<div v-if="!sysFile.url || sysFile.url === '' ||" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
          <div v-if="userInfo.photo " class="avatar-img">
            <img v-show="isShow" :src="showImg(userInfo.photo, true)" alt="" />
          </div>
          <div class="text-wrap">
            <h1 class="name">{{ nickName }}</h1>
            <div class="tip">{{ userInfo.mainGroupName }}</div>
            <div class="data"><strong>{{ tools.getMinZero(spaceData.ups) }}</strong> <span>获赞</span>  &nbsp; <strong>{{ tools.getMinZero(spaceData.watched) }}</strong> <span>关注</span> &nbsp; <strong>{{ tools.getMinZero(spaceData.fans) }}</strong> <span>粉丝</span> &nbsp;</div>
          </div>
        </div>
        <section v-if="myself" class="">
          <ul class="tab noborder">
            <li v-if="computedHasFocus" @click.stop="alertDialog(createUser)">
              <span>取消关注</span>
            </li>
            <li v-else @click.stop="focus()">
              <span><strong>+</strong>关注</span>
            </li>
          </ul>
        </section>
        <div v-if="false" class="arrow">
          <i class="icon-arrow"
            ><img
              src="../../../../static/images/dangjian/dangwu/arrow-left.png"
              alt=""
          /></i>
        </div>
      </div>
    </div>

    <section class="no-bg">
      <div class="block">
        <div class="videos-wrap">
          <ul class="hd">
            <li
              @click="myWorks()"
              class="item"
              :class="{ active: tabIndex == 0 }"
            >
              <span>作品</span>
            </li>
            <li class="line"></li>
            <li
              @click="myLike()"
              class="item"
              :class="{ active: tabIndex == 1 }"
            >
              <span>喜欢</span>
            </li>
            <li class="line"></li>
            <li
              @click.stop="myFollow()"
              class="item"
              :class="{ active: tabIndex == 2 }"
            >
              <span>关注</span>
            </li>
          </ul>

          <div class="bd">
            <!-- 作品列表 -->
            <section style="width: 100%" class="d-scroll" v-if="tabIndex === 0">
              <ul class="zp-menu" v-if="!myself">
                <button v-for="(item,index) in zpMenuList" v-preventReClick="1000" :key="index" @click="zpClickMenu(item,index)" :class="{'active':zpCheckStatus == item.status}">{{item.name}}</button>
              </ul>
              <cube-scroll
                ref="scroll1"
                :options="options1"
                :scrollEvents="['scroll-end']"
                @pulling-up="onPullingUp1"
                @pulling-down="onPullingDown1"
                @scroll-end="scrollEnd1"
              >
                <fetchData
                  :loading="isLoading1"
                  :data="myWorkList"
                ></fetchData>
                <div class="clearfix">
                  <div
                    @touchstart.prevent="gtouchstart(data,index,myWorkList)"
                    @touchend.prevent="gtouchend(data,index)"
                    @touchmove.prevent="gtouchmove(data,index)"
                    class="video-item"
                    v-for="(data, index) in myWorkList"
                    :key="index"
                  >
                    <div class="img">
                      <div class="recommend-transcode" v-if="data.transcodeStatus === 0">转码中</div>
                      <span class="recommend-flag" v-show="data.checkOpinion">推荐</span>
                      <img
                        v-if="!data.listPic || data.listPic === ''"
                        src="../../../../static/images/dangjian/home/water-logo.png"
                        alt=""
                      />
                      <img
                        v-if="data.listPic && data.listPic !== ''"
                        :src="tools.getImgUrl(data.listPic, true)"
                        alt=""
                      />
                    </div>
                    <span class="name">{{ data.title }}</span>
                  </div>
                </div>
                <noData
                  v-if="
                    !isLoading1 && tabIndex === 0 && myWorkList.length === 0
                  "
                ></noData>
                <onBottom v-else-if="onBottom1"></onBottom>
              </cube-scroll>
              <div class="upload-video" v-if="hasUploadBtn">
                <div @click="postVideo" class="img">
                  <img
                    src="../../../../static/images/dangjian/video/add-video.png"
                    alt=""
                  />
                </div>
              </div>
            </section>
            <!-- 喜欢列表 -->
            <section style="width: 100%" class="d-scroll" v-if="tabIndex === 1">
              <cube-scroll
                ref="scroll2"
                :options="options2"
                :scrollEvents="['scroll-end']"
                @pulling-up="onPullingUp2"
                @pulling-down="onPullingDown2"
                @scroll-end="scrollEnd2"
              >
                <div class="clearfix">
                  <fetchData :loading="isLoading2" :data="myLikeList"></fetchData>
                  <div
                    class="video-item"
                    v-for="(data, index) in myLikeList"
                    :key="index"
                    @click="playVideo(data,index)"
                  >
                    <div class="img">
                      <span class="recommend-flag" v-show="data.checkOpinion">推荐</span>
                      <img
                        v-if="!data.listPic || data.listPic === ''"
                        src="../../../../static/images/dangjian/home/water-logo.png"
                        alt=""
                      />
                      <img
                        v-if="data.listPic && data.listPic !== ''"
                        :src="tools.getImgUrl(data.listPic, true)"
                        alt=""
                      />
                    </div>
                    <span class="name">{{ data.title }}</span>
                  </div>
                </div>
                <noData
                  v-if="!isLoading2 && myLikeList.length === 0 && tabIndex === 1"
                ></noData>
                <onBottom v-else-if="onBottom2"></onBottom>
              </cube-scroll>
            </section>
            <!-- 关注列表 -->
            <section
              style="width: 100%"
              class="d-scroll people-list"
              v-if="tabIndex === 2"
            >
              <cube-scroll
                ref="scroll3"
                :options="options3"
                :scrollEvents="['scroll-end']"
                @pulling-up="onPullingUp3"
                @pulling-down="onPullingDown3"
                @scroll-end="scrollEnd3"
              >
                <fetchData :loading="isLoading3" :data="myFollowList"></fetchData>
                <div
                  class="people-item"
                  v-for="(item, index) in myFollowList"
                  @click="goMyFollow(item)"
                  :key="index"
                >
                  <section class="people-info">
                    <div class="avatar-img">
                      <img
                        v-if="item.photo"
                        :src="tools.getImgUrl(item.photo, true)"
                        alt=""
                      />
                      <!--                      <img-->
                      <!--                        v-else=""-->
                      <!--                        src="../../../../static/images/default.jpg"-->
                      <!--                        alt=""-->
                      <!--                      />-->
                      <img
                        v-else=""
                        src="../../../../static/images/dangjian/home/water-logo.png"
                        alt=""
                      />
                    </div>
                    <span class="name">{{ getName(item) }}</span>
                  </section>

                  <div
                    v-if="isShowImg"
                    @click.stop="cancelFollow(item, index)"
                    class="color-tip"
                  >
                    取消关注
                  </div>
                </div>
                <noData v-if="!isLoading3 && myFollowList.length === 0"></noData>
                <onBottom v-else-if="onBottom3"></onBottom>
              </cube-scroll>
            </section>
          </div>
        </div>
      </div>
    </section>
  </article>
</template>

<script>
var timeOutEvent = 0; //定时器
import tools from "@/utils/tools";
import api from "@/common/config/api";
import Axios from "axios";

export default {
  name: "microVideo",
  data() {
    return {
      myself: true,
      computedHasFocus: false,
      createUser: "",
      username: "",
      isShowImg: false,
      isShow:false,
      isLoading1: true,
      isLoading2: true,
      isLoading3: true,
      onBottom: false, // W onBottom
      spaceData: {}, //博客空间的获赞数、关注数、粉丝数
      myWorkList: [],
      myLikeList: [],
      myFollowList: [],
      tabIndex: 0,
      userInfo: {},
      nickName: "",
      hasUploadBtn: false,
      zpMenuList: [ //作品审核状态(0待审核;1通过;2不通过)
        {
          name: "审核已通过",
          status: 1
        },
        {
          name: "审核未通过",
          status: 2
        },
        {
          name: "审核中",
          status: 0
        },
      ],
      zpCheckStatus: 1, //默认已通过

      y1: null,
      pageIndex1: 1,
      onBottom1: false,
      options1: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      y2: null,
      pageIndex2: 1,
      onBottom2: false,
      options2: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      y3: null,
      pageIndex3: 1,
      onBottom3: false,
      options3: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      newsDetail: {
        newsContent: null,
        files: null,
        upOrDown: null,
        collected: null,
      },
      userIdNew : '',//用于判断是否是自己的变量
    };
  },
  computed: {},
  watch: {
    $route: function (newVal, oldVal) {
      this.myself = true;
      this.myWorkList = [];
      this.myLikeList = [];
      this.zpCheckStatus = 1 //jingjian 2020年12月27日 01:32:13 解决从我的首页跳转到别人的首页，数据不正常的问题

      this.myFollowList = [];
      this.pageIndex1 = 1;
      this.pageIndex2 = 1;
      this.pageIndex3 = 1;
      this.userInfo = this.$localStorage.get("userInfo");
      this.userId = this.$route.query.userId;
      this.hasUploadBtn = this.userInfo.id === this.userId;
      this.getUserInfo(this.userId);
      // this.getMyVideos();
      this.getSpaceData(this.userId);
      this.tabIndex = sessionStorage.getItem("microVideoTab") || 0;
      if (this.tabIndex == 0) {
        this.myWorks();
      } else if(this.tabIndex == 1) {
        this.myLike();
      } else if(this.tabIndex == 2) {
        this.myFollow();
      }
    },
  },
  created() {
    this.userInfo = this.$localStorage.get("userInfo");
    this.userId = this.$route.query.userId;
    this.nickName = this.$route.query.nickName;
    this.hasUploadBtn = this.userInfo.id === this.userId;
    this.username = this.$localStorage.get("userNameCache");
    console.log(" this.hasUploadBtn", this.hasUploadBtn);
    this.isShow = true
    this.getUserInfo(this.userId);
    this.getMyVideos();
    this.getSpaceData(this.userId);
    this.loginCount();
    this.listInterestedUser();
  },
  activated() {},
  beforeDestroy() {
  },
  methods: {
    // 我的作品状态选择
    zpClickMenu(item,index){
      this.zpCheckStatus = item.status;
      this.myWorks();
    },
    onPullingDown1() {
      console.log("onPullingDown");
      this.options1.pullUpLoad = true;
      this.pageIndex1 = 1;
      this.myWorkList = [];
      this.getMyVideos();
    },
    onPullingUp1() {
      this.getMyVideos();
    },
    scrollEnd1({ x, y }) {
      this.y = y;
      console.log("scrollEnd", this.y);
    },
    onPullingDown2() {
      console.log("onPullingDown");
      this.options2.pullUpLoad = true;
      this.pageIndex2 = 1;
      this.myLikeList = [];
      this.getMyLike();
    },
    onPullingUp2() {
      this.getMyLike();
    },
    scrollEnd2({ x, y }) {
      this.y2 = y;
      console.log("scrollEnd", this.y2);
    },
    onPullingDown3() {
      console.log("onPullingDown");
      this.options3.pullUpLoad = true;
      this.pageIndex3 = 1;
      this.myFollowList = [];
      this.getMyFollow();
    },
    onPullingUp3() {
      this.getMyFollow();
    },
    scrollEnd3({ x, y }) {
      this.y = y;
      console.log("scrollEnd", this.y);
    },

    /*登录多少次，如果是第一次就提示上传信息*/
    loginCount() {
      this.fetchService.loginCount().then((res) => {
        if (res.code === 0 && res.data === 0) {
          this.tools.alert(
            "欢迎加入“红云播客”！快给自己取个好听的昵称，把你创作的正能量党建短视频分享给大家吧！"
          );
        }
      });
    },
    computedHas() {
      if (this.isHasFocus(this.createUser, this.$store.state.listInterestedUser)) {
        this.computedHasFocus = true;
      }else{
        this.computedHasFocus = false;
      }
    },
    postVideo() {
      this.$router.push({ name: "postVideo" });
    },
    getUserInfo(userId) {
      this.fetchService.getUserInfo(userId).then((res) => {
        console.log('res',res);
        if (res.userId) {
          this.userIdNew = res.userId
          this.userInfo = res;
          console.log("this.userInfo111==", this.userInfo);
          if (res.qq && res.qq !== "") {
            this.nickName = res.qq;
          } else if (res.fullname && res.fullname !== "") {
            this.nickName = res.fullname;
          } else if (res.nickname && res.nickname !== "") {
            this.nickName = res.nickname;
          }
          this.loginNew(res.userNo);
        }
        this.isShow = true
      });
    },
    loginNew(username) {
      this.isShowImg = false;
      this.myself = true;
      this.fetchService.loginNew({ username }).then((res) => {
        if (res.code === 0) {
          this.userInfo = res.data;
          this.createUser = this.userInfo.id;
          // if (this.userInfo.username == this.username) {
          if (this.userIdNew == this.$localStorage.get("userInfo").id) {
            //查看别人的播客不显示取消关注
            this.isShowImg = true;
            this.myself = false;
            this.zpCheckStatus = 1;
          } else {
            this.myself = true;
          }
          this.computedHas();
          this.nickName =
            this.userInfo.qq ||
            this.userInfo.nickname ||
            this.userInfo.fullname;
        }
      });
    },
    //博客空间的获赞数、关注数、粉丝数
    getSpaceData(id) {
      var data = {
        userId: id
      }
      this.fetchService.play_mySpaceData(data).then((res) => {
        if (res.code === 0) {
          this.spaceData = res.data;
        }
      });
    },
    //获取内容详情(新)
    contentDetailNew(v) {
      let me = this;
      return me.fetchService.contentDetailNew(v.id).then((res) => {
        if (res.code === 0) {
          return res.data.newsContent;
        }
      });
    },
    //获取新闻附件
    newsFiles(v) {
      let me = this;
      return me.fetchService.newsFiles(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否点赞指定的新闻
    contentGetSfdz(v) {
      let me = this;
      return me.fetchService.contentGetSfdz(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否收藏指定的新闻
    contentGetSfsc(v) {
      let me = this;
      return me.fetchService.contentGetSfsc(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //开始按
    gtouchstart(item,index,list){
      var self = this;
      timeOutEvent = setTimeout(function(){
        if(!self.myself){
          self.longPress(item, index,list)
        }else{
          clearTimeout(timeOutEvent);//清除定时器
          return false
        }
      },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gtouchend(item, index){
      clearTimeout(timeOutEvent);//清除定时器
      if(timeOutEvent!=0){
        //这里写要执行的内容（尤如onclick事件）
        this.playVideo(item, index)
      }
      return false;
    },
    // //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove(){
      clearTimeout(timeOutEvent);//清除定时器
      timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress(item, index,list){
      timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      let me = this
      this.$createDialog({
        type: 'confirm',
        icon: '',
        title: '温馨提示',
        content: '确定删除？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          let data={
            "ids": [item.id]
          }
          this.fetchService.deleteNews(data).then(res => {
            if (res.code === 0) {
              tools.tip("删除成功")
              list.splice(index, 1)
            }
          })
        }
      }).show()
    },
    // 正在修改成 点击播放后 滑动播放
    playVideo(item, index) {
      if(item.transcodeStatus === 0){
        return this.tools.tip('转码中，请稍候...',1000)
      }
      var obj = {};
      if (this.tabIndex === 0) {
          obj = {
            fromType: 'zp', //作品
            userId: this.userId,
            zpCheckStatus: this.zpCheckStatus,
            pageIndex: this.pageIndex1 || 1,
            list: this.myWorkList,
            index: index, //当前播放序号
          }
      }else if (this.tabIndex === 1) {
          obj = {
            fromType: 'xh', //喜欢
            userId: this.userId,
            pageIndex: this.pageIndex2 || 1,
            list: this.myLikeList,
            index: index, //当前播放序号
          }
      }

      this.$store.state.currentRegionalData = obj;  //将目前数据传到弹窗组件
      this.$createVideoSlidePlayer().show();
      /* this.$router.push({ path: "/videoSlidePlayerJump" });
      this.$store.state.needRefreshPodcast = false; //返回不需要刷新
      this.$store.state.nowKeepAlive = false; //KeepAlive */
    },
    playVideo2(item, index) {
      this.$store.state.newsDetail = item;
      this.tools.showLoading();

      var me = this;
      return Axios.all([
        me.contentDetailNew(item),
        me.newsFiles(item),
        me.contentGetSfdz(item),
        me.contentGetSfsc(item),
      ])
        .then(
          Axios.spread((res1, res2, res3, res4) => {
            me.tools.hideLoading();
            me.newsDetail.newsContent = res1;
            me.newsDetail.files = res2;
            me.newsDetail.upOrDown = res3;
            me.newsDetail.collected = res4;

            item.detail = me.newsDetail;
            me.$store.state.newsDetail = item;
            console.log("playVideo", item);

            me.$createVideoPlayerComponent({
              $props: {
                videoUrl: me.tools.getImgUrl(res2[0].fileId),
              },
            }).show();
            return false;
          })
        )
        .catch((err) => {
          console.log(err.response);
        });
    },
    //后面不再用
    playVideo3(item, index) {
      this.$store.state.newsDetail = item;
      this.tools.showLoading();
      this.fetchVideoDetail(item).then((data) => {
        this.tools.hideLoading();
        this.$store.state.newsDetail.detail = data;
        console.log("newsDetail", this.$store.state.newsDetail);
        this.$createVideoPlayerComponent({
          $props: {
            // fullName:this.$store.state.newsDetail.detail.newsContent.publisher,
            videoUrl: this.tools.getImgUrl(data.files[0].fileId),
          },
        }).show();
      });
    },
    fetchVideoDetail(item) {
      return this.fetchService.contentPageDetail(item.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    focus() {
      let createUser = this.createUser;
      console.log("createUser", createUser);
      this.fetchService.smallVideoWatch(createUser).then((res) => {
        this.listInterestedUser();
        if (res.code === 0) {
          this.$store.state.listInterestedUser.push({
            userId: this.createUser,
          });
          this.computedHas();
        } else {
          this.tools.tip(res.message);
        }
      });
    },
    getMyVideos() {
      if (this.pageIndex1 == 1) {
        this.myWorkList = [];
      }
      this.isLoading1 = true;
      this.onBottom1 = false;
      let params = {
        checkStatus: this.zpCheckStatus,
        pageNo: this.pageIndex1 + "",
        pageSize: 18,
        userId: this.userId,
      };
      var that = this;
      this.fetchService.smallVideoOwn(params).then((res) => {
        this.isLoading1 = false;

        if (res.code !== 0) {
          this.$refs.scroll1.forceUpdate && this.$refs.scroll1.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.onBottom1 = true;
          this.options1.pullUpLoad = false;
          this.$refs.scroll1.forceUpdate && this.$refs.scroll1.forceUpdate();
          return;
        }
        this.pageIndex1++;

        const myWorkList = res.data.map(async (item,index)=>{
          var params = {
            newsId: item.id
          }
          const {
            data
          } = await that.fetchService.play_queryRecommend(params)
          item.checkOpinion = data;
          return item;
        })
        Promise.all(myWorkList).then((result) => {
            // this.sortArr(myWorkList)
            this.myWorkList = this.myWorkList.concat(result);
            setTimeout(() => {
              this.$refs.scroll1.forceUpdate &&
                this.$refs.scroll1.forceUpdate(true, false);
            }, 100);
        }).catch((error) => {
          console.log(error)
        })
      });
    },
    // 数组重新排序
    sortArr(arr) {
      arr.sort((a, b) => a.index - b.index);
    },
    getMyUps() {},
    myWorks() {
      this.tabIndex = 0;
      this.pageIndex1 = 1;
      this.myWorkList = [];
      this.getMyVideos();
    },
    myLike() {
      this.tabIndex = 1;
      this.pageIndex2 = 1;
      this.myLikeList = [];
      this.getMyLike();
    },
    back () {
      this.isShow = false
      this.$emit('onback')
      this.tools.back()
      sessionStorage.setItem("microVideoTab", 2);
    },
    myFollow() {
      this.tabIndex = 2;
      this.pageIndex3 = 1;
      this.myFollowList = [];
      this.getMyFollow();
    },
    getMyLike() {
      this.isLoading2 = true;
      this.onBottom2 = false;
      let params = {
        pageNo: this.pageIndex2 + "",
        pageSize: 18,
        userId: this.userId,
      };
      this.fetchService.smallVideoMyDianZan(params).then((res) => {
        this.isLoading2 = false;
        if (res.code !== 0) {
          this.$refs.scroll2.forceUpdate && this.$refs.scroll2.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.options2.pullUpLoad = false;
          this.onBottom2 = true;
          this.$refs.scroll2.forceUpdate && this.$refs.scroll2.forceUpdate();
          return;
        }
        this.pageIndex2++;

        const myLikeList = res.data.map(async (item,index)=>{
          var params = {
            newsId: item.id
          }
          const {
            data
          } = await this.fetchService.play_queryRecommend(params)
          item.checkOpinion = data;
          return item;
        })
        Promise.all(myLikeList).then((result) => {
            this.myLikeList = this.myLikeList.concat(result);
            setTimeout(() => {
              this.$refs.scroll2.forceUpdate &&
                this.$refs.scroll2.forceUpdate(true, false);
            }, 100);
        }).catch((error) => {
          console.log(error)
        })
      });
    },
    getMyFollow() {
      this.isLoading3 = true;
      this.onBottom3 = false;
      let params = {
        pageNo: this.pageIndex3 + "",
        pageSize: 18,
        userId: this.userId,
      };
      this.fetchService.listInterestedUser(params).then((res) => {
        this.isLoading3 = false;
        if (res.code !== 0) {
          this.$refs.scroll3.forceUpdate && this.$refs.scroll3.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.options3.pullUpLoad = false;
          this.onBottom3 = true;
          this.$refs.scroll3.forceUpdate && this.$refs.scroll3.forceUpdate();
          return;
        }
        this.pageIndex3++;
        this.myFollowList = this.myFollowList.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll3.forceUpdate &&
            this.$refs.scroll3.forceUpdate(true, false);
        }, 100);
      });
    },
    goMyFollow(item) {
      // this.userInfo =''
      this.isShow = false
      sessionStorage.setItem("microVideoTab", 0);
      this.$router.push({ name: "microVideo", query: { userId: item.userId } })
      // this.$localStorage.set("tabIndex", this.tabIndex);
      /* this.$localStorage.set("myFollow", item);
      this.$router.push({ name: "myFollow" }); */
    },
    cancelFollow(item, index) {
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "温馨提示",
        content: "是否取消关注？",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          this.fetchService.smallVideoCancelWatch(item.userId).then((res) => {
            if (res.code !== 0) {
              return tools.tip(res.message);
            }
            this.myFollowList.splice(index, 1);
            let params = {
              pageNo: 1,
              pageSize: 1000,
            };
            this.fetchService.listInterestedUser(params).then((res) => {
              if (res.code === 0) {
                this.$store.state.listInterestedUser = res.data;
              }
            });
          });
        },
        onCancel: () => {},
      }).show();
    },
    showImg(fileId) {
      let fileUrl = this.tools.getImgUrl(fileId);
      console.log("-------------fileUrl=", fileUrl);
      return fileUrl;
    },
    deleteMyVideo(item) {
      this.fetchService.deleteMyVideo(item.id).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        tools.tip("删除成功");
        this.getMyVideos();
      });
    },
    alertDialog(createUser) {
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "温馨提示",
        content: "是否取消关注？",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          this.fetchService.smallVideoCancelWatch(createUser).then((res) => {
            if (res.code !== 0) {
              return tools.tip(res.message);
            }
            this.$store.state.listInterestedUser.forEach((item, index) => {
              if (item.userId == createUser) {
                this.$store.state.listInterestedUser.splice(index, 1);
                this.computedHasFocus = false;
              }
            });
          });
        },
        onCancel: () => {},
      }).show();
    },
    goModifyNick() {
      let myInfo = this.tools.getUserInfo();
      if (this.userInfo.id !== myInfo.id) {
        return false;
      }
      this.$router.push({ path: "/modifyNickName" });
    },
    getName(item) {
      if (item.qq && item.qq !== "") {
        return item.qq;
      }
      return item.fullname;
    },
    /*关注列表*/
    listInterestedUser() {
      let params = {
        pageNo: 1,
        pageSize: 1000,
      };
      this.fetchService.listInterestedUser(params).then((res) => {
        if (res.code === 0) {
          this.$store.state.listInterestedUser = res.data;
        }
      });
    },
    /*判断是否关注*/
    isHasFocus(userId, list) {
      let ret = false;
      list.some((v) => {
        if (v.userId === userId) {
          ret = true;
          return false;
        }
      });
      return ret;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.cube-scroll-wrapper {
  height: 72%;
}
.clearfix:after {
  content: "."; /*内容为小点，尽量不要为空，防止旧版本丢弃*/
  display: block;
  height: 0;
  visibility: hidden; /*隐藏盒子*/
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.video-item {
  float: left;
}
.videos-wrap .bd .video-item .img{
  background: #181824;
}
.glass{
  /*filter:blur(4px);
  -webkit-filter:blur(4px);
  -moz-filter:blur(4px);
  -ms-filter:blur(4px);
  -o-filter:blur(4px);*/
}
.people-list {
  flex: 1;
}
.noborder {
  > li {
    > span {
      > strong {
        line-height: 100%;
        margin: auto;
        font-size: 22PX;
        color: red;
        float: left;
      }
    }
  }
}
.tip {
  width: 45vw;
}
  .back{
    width: 1.06667rem;
    height: 100%;
    text-align: center;
    left: 1%;
    position: absolute;
}
.recommend-flag{
  padding: 0px 8px;
  border-radius: 4px;
  top: 10px;
  left: 10px;
  font-size: 12PX;
  background: #e20001;
  color: #fff;
  position: absolute;
  z-index: 888;
}
.recommend-transcode{
  color: #fff;
  z-index: 889;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: rgba(202, 202, 202,0.5);
  font-size: 15PX;
  padding-top: 60%;
}


/*块状菜单*/
.zp-menu {
  display:flex;
  justify-content: space-between;
  background-color: #fff;
  padding: pxToRem(12px) pxToRem(20px);
  button {
    white-space:nowrap;
    width:30%;
    height:pxToRem(60px);
    line-height:pxToRem(60px);
    font-size:14PX;
    font-style: normal;
    font-weight:400;
    text-align: center;
    border: 1px solid #ccc;
    border-radius:pxToRem(5px);
    padding:0 20px;
    &.width-auto {
      width:auto;
    }
    &.active {
      color: rgba(226,0,1,1);
      border:1px solid rgba(226,0,1,1);
    }
  }
}
</style>
